<script lang="ts" setup>
import { queryBikeShortTermOperationTableCol } from '@/api/record/types/record'
import { formatChannel } from '@/utils/formatter'
import { useRouter } from 'vue-router'
defineProps<{
  data: queryBikeShortTermOperationTableCol[]
  loading: boolean
}>()
const router = useRouter()
const bikeLocation = (row: queryBikeShortTermOperationTableCol) => {
  router.push({
    name: 'TimeBikeOperationLocation',
    query: {
      deviceLatitude: row.deviceLatitude,
      deviceLongitude: row.deviceLongitude,
      userLatitude: row.userLatitude,
      userLongitude: row.userLongitude,
      createdTime: row.createdTime,
      bikeCode: row.bikeCode
    }
  })
}
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column prop="bikeCode" label="车辆编号" align="center" />
    <el-table-column label="用户" align="center">
      <template #default="scope">
        {{ scope.row.name }}({{ scope.row.role }}){{ scope.row.phone }}
      </template>
    </el-table-column>
    <el-table-column prop="channel" label="客户端类型" align="center" :formatter="formatChannel" />
    <el-table-column prop="version" label="客户端版本" align="center" />
    <el-table-column prop="operationData" label="操作内容" align="center" />
    <el-table-column prop="createdTime" label="操作时间" sortable align="center" />
    <el-table-column label="操作位置" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          link
          class="is-open"
          v-if="
            Number(scope.row.deviceLongitude) &&
            scope.row.deviceLongitude &&
            scope.row.deviceLatitude !== '0.65535'
          "
          @click="bikeLocation(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
